/**
 * 类似华为手机的下拉刷新
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Animated,
  Easing
} from 'react-native';
import PropTypes from 'prop-types';
import { SmartRefreshControl, AnyHeader, DefaultHeader } from 'react-native-smartrefreshlayout';
import Icon from 'react-native-vector-icons/Ionicons';
import { MaterialIndicator } from 'react-native-indicators';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);
export default class SmartRefreshHeader extends Component {

  constructor(props) {
    super(props);
    this.rotate = new Animated.Value(0);
    this.state = {
      text: '下拉刷新',
      refreshing: false
    };
  }
  _onPullDownToRefresh = () => {
    console.log('----');
    this.setState({
      text: '下拉刷新',
      refreshing: false
    });
    Animated.timing(this.rotate, {
      toValue: 0,
      duration: 50,
      useNativeDriver: true,
      easing: Easing.linear()
    }).start()
  };
  _onReleaseToRefresh = () => {
    this.setState({
      text: '释放刷新'
    }, () => {
      Animated.timing(this.rotate, {
        toValue: 1,
        duration: 50,
        useNativeDriver: true,
        easing: Easing.linear()
      }).start()
    });
  };
  _onRefresh = () => {
    this.setState({
      refreshing: true,
      text: '正在刷新'
    }, () => {
      let { onRefresh } = this.props;
      onRefresh && onRefresh();
    });
  };
  finishRefresh = (params) => {
    console.log(params);
    this._refreshc && this._refreshc.finishRefresh({ delayed: -1, success: true });
  };

  render() {
    return (
      <SmartRefreshControl primaryColor='transparent'
        style={{ flex: 1 }}
        ref={ref => this._refreshc = ref}
        children={this.props.children}
        onRefresh={this._onRefresh}
        onPullDownToRefresh={this._onPullDownToRefresh}
        onReleaseToRefresh={this._onReleaseToRefresh}
        headerHeight={54}
        renderHeader={<DefaultHeader />}
      />
    );
  }
}
